﻿
@model Bordspil.Models.GameInstance

@{
    ViewBag.Title = "Borðspil.com - " + Model.PlayerName;
}

<h2 class="headingText">TicTacToe</h2>


<table id ="tictactoe">
    <tbody>
		<tr>
			<td id="cell1">&nbsp;</td>
			<td id="cell2">&nbsp;</td>
			<td id="cell3">&nbsp;</td>
		</tr>
		<tr>
			<td id="cell4">&nbsp;</td>
			<td id="cell5">&nbsp;</td>
			<td id="cell6">&nbsp;</td>
		</tr>
		<tr>
			<td id="cell7">&nbsp;</td>
			<td id="cell8">&nbsp;</td>
			<td id="cell9">&nbsp;</td>
		</tr>
      
    </tbody>
</table>
<div id="game">
    <span class="game-name"></span>
    <button class="rating" value="+">+</button>
    <button class="rating" value="-">-</button>
    <span id="tictac-rating"></span>
    <p class="game-rules"></p>
</div>

<script type="text/javascript">
    $(function () {
        var group = '@(Model.InstanceId)';
        var userName = '@(User.Identity.Name)';
        var doer;

        var hub = $.connection.ticTacToeHub;


        function WhosTurn(group) {
            var group = parseInt(group);
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: "/TicTacToe/WhosTurnIsIt",
                data: { "groupId": group },
                dataType: "json",
                success: function (data) {
                    console.log("aa");
                }
            });
        }
        


	    hub.client.cellClicked = function (cellId) {
	        $("#" + cellId).text("O");
	    };

	    $.connection.hub.start().done(function () {
	        hub.server.join(group, userName);

	        $("#tictactoe tr td").click(function () {
	            hub.server.clickCell(group, this.id);
	            $(this).text("X");
	            WhosTurn(group);
	            
	        });
	    });
	});


</script>